<template>
  <div>
    <el-dialog title="创建代码仓库" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <div slot="title" class="header-title">
        <span v-show="!codeData.Name" class="title-name">创建代码仓库</span>
        <span v-show="codeData.Name" class="title-name">编辑代码仓库</span>
      </div>
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="codeData"
        label-position="left"
        label-width="140px"
        style=" margin-left:50px;"
      >
        <el-form-item label="代码仓库名称" prop="Name">
          <el-input v-model="codeData.Name" />
        </el-form-item>
        <el-form-item label="代码仓库路径" prop="Path">
          <el-input v-model="codeData.Path" placeholder="请输入项目标识串">
            <template slot="prepend">{{ longPath }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="公开性" prop="Visibility">
          <el-select v-model="codeData.Visibility" placeholder="请选择">
            <el-option
              v-for="item in visibilityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="项目描述(可选)" prop="Description">
          <el-input v-model="codeData.Description" type="textarea" :rows="2" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="创建README" prop="InitializeWithReadme">
          <el-checkbox v-model="codeData.InitializeWithReadme" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createReop } from '@/utils/apiPath';
export default {
  name: 'CodeReposDialog',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    codeData: {
      type: Object,
      default: () => {}
    },
    longPath: {
      type: String,
      default: ''
    },
    visibilityOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      rules: {
        Name: [
          { required: true, message: '代码仓库名称必填', trigger: 'blur' }
        ],
        Path: [{ required: true, message: '项目标识串', trigger: 'blur' }],
        Visibility: [
          { required: true, message: '公开性必选', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createReop(this.codeData).then(() => {
            this.$message.success('创建成功');
            this.$emit('submitGitList');
          });
        }
      });
    },
    handleClose() {
      this.$emit('submitGitList');
    }
  }
};
</script>

<style type="text/css" scoped lang="scss">
</style>
